<template>
  <div class="mycenter" v-loading="dataLoading">
    <!--头像-->
    <div class="clearfix margin-top">
      <div class="avatar pull-left">
        <p>
          <img v-if="$store.state.user.headUrl" width="120" height="120" :src="dataForm.headUrl">
          <img v-else width="120" height="120" src="~@/assets/img/avatar.png">
        </p>
        <p class="avatar-txt-margin">
          <el-button type="text" @click="updatePhotoHandle()" style="font-weight: normal;">
            {{ $t('usercenter.updatePhoto') }}</el-button>
        </p>
      </div>
      <div class="summary">
        <p>
          <span>{{ $t('usercenter.userName') }}</span>
          <span>：</span>{{dataForm.username}}
        </p>
        <p>
          <span>{{ $t('usercenter.deptName') }}</span>
          <span>：</span> {{dataForm.deptName==null?$t('usercenter.no'):dataForm.deptName}}</p>
        <p><span>{{ $t('usercenter.registDate') }}</span> <span>：</span> {{dataForm.createDate}}</p>
      </div>
    </div>
    <!--安全-->
    <div>
      <div class="secure-level">
        <div class="pull-left">{{ $t('usercenter.levelText') }}</div>
        <div class="progress pull-left margin-left-4" style="width:200px">
          <el-progress :text-inside="true" :stroke-width="18" :percentage="dataForm.securityLevel" :show-text="false"
            style="width:200px"
            :color="dataForm.securityLevel>=90?'#5cb85c':dataForm.securityLevel>=60?'#f0ad4e':'#d9534f'"></el-progress>
        </div>
        <div class="margin-left-4 pull-left">
          <span>{{ $t('usercenter.levelText2') }}</span>:
          <span v-if="dataForm.securityLevel>=90" class="text-success">{{ $t('usercenter.levelStatus3') }}</span>
          <span v-else-if="dataForm.securityLevel>=60" class="text-warning">{{ $t('usercenter.levelStatus2') }}</span>
          <span v-else class="text-danger">{{ $t('usercenter.levelStatus1') }}</span>
        </div>
      </div>
    </div>
    <!--内容-->
    <div>
      <ul class="secure-set-list">
        <li>
          <div class="set-list-left pull-left">
            <b>{{ $t('usercenter.password') }}</b>
          </div>
          <div class="set-list-right pull-right">
            <span v-if="dataForm.pwdLevel===0" class="text-warning">
              <span class="icon el-icon-circle-close text-size-18 margin-right-1"></span>
              <span>{{ $t('usercenter.pwdLevel0') }}</span>
            </span>
            <span v-else class="text-success">
              <span class="icon el-icon-circle-check text-size-18 margin-right-1"></span>
              <span>{{ $t('usercenter.set') }}</span>
            </span>
            <span class="text-explode">|</span>
            <span class="link-operation">
              <el-button type="text" @click="updatePasswordHandle()" style="font-weight: normal;">
                {{dataForm.pwdLevel===0?$t('usercenter.setButton'):$t('usercenter.setUpdate') }}</el-button>
            </span></div>
          <div class="set-list-mid">
            <div class="inner">{{ $t('usercenter.passwordText') }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <ul class="secure-set-list">
        <li>
          <div class="set-list-left pull-left">
            <b>{{ $t('usercenter.moblie') }}</b>
          </div>
          <div class="set-list-right pull-right">
            <span v-if="dataForm.mobile===null" class="text-warning">
              <span class="icon el-icon-circle-close text-size-18 margin-right-1"></span>
              <span>{{ $t('usercenter.noSet') }}</span>
            </span>
            <span v-else class="text-success">
              <span class="icon el-icon-circle-check text-size-18 margin-right-1"></span>
              <span>{{ $t('usercenter.set') }}</span>
            </span>
            <span class="text-explode">|</span>
            <span class="link-operation">
              <el-button type="text" @click="updatePhoneHandle()" style="font-weight: normal;">
                {{dataForm.mobile===null?$t('usercenter.setButton'):$t('usercenter.setUpdate') }}</el-button>
            </span>
          </div>
          <div class="set-list-mid">
            <div v-if="dataForm.mobile===null" class="inner">{{ $t('usercenter.moblieText') }}</div>
            <div v-else class="inner">{{ $t('usercenter.moblieText1') }}<span
                class="text-success">{{dataForm.mobile}}</span> {{ $t('usercenter.moblieText2') }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <ul class="secure-set-list">
        <li>
          <div class="set-list-left pull-left">
            <b>{{ $t('usercenter.email') }}</b>
          </div>
          <div class="set-list-right pull-right">
            <span v-if="dataForm.email===null" class="text-warning">
              <span class="icon el-icon-circle-close text-size-18 margin-right-1"></span>
              <span>{{ $t('usercenter.noSet') }}</span>
            </span>
            <span v-else class="text-success">
              <span class="icon el-icon-circle-check text-size-18 margin-right-1"></span>
              <span>{{ $t('usercenter.set') }}</span>
            </span>
            <span class="text-explode">|</span>
            <span class="link-operation">
              <el-button type="text" @click="updateEmailHandle()" style="font-weight: normal;">
                {{dataForm.email===null?$t('usercenter.setButton'):$t('usercenter.setUpdate') }}</el-button>
            </span>
          </div>
          <div class="set-list-mid">
            <div v-if="dataForm.email===null" class="inner">{{ $t('usercenter.emailText1') }}</div>
            <div v-else class="inner">{{ $t('usercenter.emailText2') }}<span
                class="text-success">{{dataForm.email}}</span></div>
          </div>
        </li>
      </ul>
    </div>
    <ul class="secure-set-list">
      <li>
        <div class="set-list-left pull-left">
          <b>{{$t('usercenter.encrypted') }}</b>
        </div>
        <div class="set-list-right pull-right">
          <span v-if="!dataForm.encrypted" class="text-warning">
            <span class="icon el-icon-circle-close text-size-18 margin-right-1"></span>
            <span>{{ $t('usercenter.noSet') }}</span>
          </span>
          <span v-else class="text-success">
            <span class="icon el-icon-circle-check text-size-18 margin-right-1"></span>
            <span>{{ $t('usercenter.set') }}</span>
          </span>
          <span class="text-explode">|</span>
          <span class="link-operation">
            <el-button type="text" @click="updateQuestionHandle()" style="font-weight: normal;">
              {{dataForm.encrypted?$t('usercenter.setUpdate'):$t('usercenter.setButton') }}</el-button>
          </span>
        </div>
        <div class="set-list-mid">
          <div class="inner">{{$t('usercenter.encryptedText') }}</div>
        </div>
      </li>
    </ul>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="addOrUpdateVisible" ref="updatePassword" @refreshData="getInfo"></update-password>
    <update-question v-if="addOrUpdateVisible" ref="updateQuestion" @refreshData="getInfo"></update-question>
    <update-phone v-if="addOrUpdateVisible" ref="updatePhone" @refreshData="getInfo"></update-phone>
    <update-email v-if="addOrUpdateVisible" ref="updateEmail" @refreshData="getInfo"></update-email>
    <center-my-photo v-if="addOrUpdateVisible" ref="uenterMyPhoto" @refreshData="getInfo"></center-my-photo>
  </div>
</template>

<script>
import UpdatePassword from './update-password'
import UpdateQuestion from './update-question'
import UpdatePhone from './update-phone'
import UpdateEmail from './update-email'
import CenterMyPhoto from './update-photo'

export default {
  data () {
    return {
      url: '/user/center',
      dataLoading: false,
      addOrUpdateVisible: false,
      dataForm: {}
    }
  },
  components: {
    UpdatePassword,
    UpdateQuestion,
    CenterMyPhoto,
    UpdatePhone,
    UpdateEmail
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        Promise.all([
          this.getInfo(true)
        ]).then(() => {
        })
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(this.url).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return
        }
        this.dataForm = res.data
      }).catch(() => {
        this.loading = false
      })
    },
    // 修改密码
    updatePasswordHandle () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassword.init()
      })
    },
    // 修改密保
    updateQuestionHandle () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.updateQuestion.init()
      })
    },
    // 修改手机
    updatePhoneHandle () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.updatePhone.init()
      })
    },
    // 修改头像
    updatePhotoHandle () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.uenterMyPhoto.init()
      })
    },
    updateEmailHandle () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.updateEmail.init()
      })
    }
  }
}
</script>

<style scoped>
ul,
li {
  list-style: none;
}

.mycenter {
  margin: 0;
  padding: 0;
}

.margin-top {
  margin-top: 8px !important;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.avatar img {
  margin-right: 28px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.avatar .avatar-txt-margin {
  width: 120px;
  text-align: center;
}

.summary {
  padding-top: 20px;
}

.secure-level {
  padding: 40px 0;
  border-top: 1px solid #e1e6eb;
}

.margin-left-4 {
  margin-left: 32px !important;
}

.text-warning {
  color: #f90 !important;
}

.text-success {
  color: #090 !important;
}

.text-danger {
  color: #f00 !important;
}

.text-explode {
  color: #ccc !important;
  font-weight: normal !important;
  margin: 0px 4px !important;
}

.text-size-18 {
  font-size: 18px;
}

.margin-right,
.margin-right-1 {
  margin-right: 8px !important;
}

.secure-set-list li {
  padding: 33px;
  border-top: 1px dashed #e1e6eb;
}

.secure-set-list li .set-list-left {
  width: 140px;
}

.secure-set-list li .set-list-right {
  width: 190px;
  padding-left: 30px;
}

.secure-set-list li .set-list-right .icon {
  position: relative;
  top: 3px;
}

.secure-set-list li .set-list-mid {
  overflow: hidden;
}

.secure-set-list li .set-list-mid .inner {
  width: 75%;
}
</style>
